import Taro,{ Component } from "@tarojs/taro"
import { View, Text, Image } from '@tarojs/components'
import { AtTabs, AtTabsPane } from 'taro-ui'
import Cata from './cata'
import FoodList from './foodlist'
import './food.styl'
class Food extends Component {
  constructor() {
    super(...arguments);
    this.state = {
      current: 0,
      tabList: [{ title: '点菜' }, { title: '评价' }, { title: '商家' }],
      foodlist: [],
      currentList: []
    }
  }
  handleClick (value) {
    this.setState({
      current: value
    })
  }
  // 切换分类
  changeCata(select) {
    if (this.state.foodlist.some(item => item.pid == select)) {
      // 存在数据不去加载
      this.setState({
        currentList: this.state.foodlist.filter(item => item.pid == select)
      })
    } else {
      // 不存在，去加载
    }
    console.log(select)
  }
  render () {
    const { tabList, current } = this.state;
    return (
      <View className="food" >
        <AtTabs current={current} tabList={tabList} onClick={this.handleClick.bind(this)}>
          <AtTabsPane current={this.state.current} index={0} >
          <View className="food_body" >
            <Cata onChangeCata={this.changeCata.bind(this)} />
            <FoodList />
          </View>
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={1}>
            <View>评价</View>
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={2}>
            <View>商家</View>
          </AtTabsPane>
        </AtTabs>
      </View>
    )
  }
}
export default Food
